<template>
  <el-card class="card-module" shadow="hover">
    <template #header>
      <div class="card-module-header">
        <h3>{{ cardQuery.title }}</h3>
        <span class="card-module-count">已选择<i style="color: #6d9bfe;">{{ cardQuery.completed }}</i>/{{
            cardQuery.total }}条记录</span>
      </div>
    </template>
    <div class="card-module-list">
      <div class="card-module-item" v-for="(item, index) in cardQuery.list" :key="index">
        <el-checkbox  v-model="item.flag"  :checked="item.flag=='1' ? true : false" class="card-module-checkbox" @change="handleCheckboxChange(item)" />
        <div class="card-module-content">
          <div class="card-module-title">
            <span>{{ getEvalrecordValue(item, 'title') }}</span>
            <div>
              <span class="card-module-tag">{{ getEvalrecordValue(item, 'location') }}</span>
              <el-icon>
                <monitor />
              </el-icon>
            </div>
          </div>
          <div class="card-module-text">{{ getEvalrecordValue(item, 'content') }}</div>
          <div class="card-module-footer">
            <span class="card-module-deadline"> <el-icon>
                    <calendar />
                </el-icon> {{ item.TJRQ }}</span>
            <span class="card-module-deadline"> <el-icon>
                    <stamp />
                </el-icon>{{ getEvalrecordValue(item, 'level') }}</span>
            <span class="card-module-deadline"> <el-icon>
                    <document />
                </el-icon> 有证明材料</span>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>

import { ref, defineProps, defineEmits, toRaw , onMounted} from 'vue';
import { useStore } from '@/store';
const store = useStore();
const recordStore = store.record;

const props = defineProps({
    cardQuery: {
        type: Object,
        default: () => ({})
    }
})



// 修改辅助函数，使其能够智能处理不同的属性命名方式
const getEvalrecordArray = (evalrecord) => {
  // 检查输入是否有效
  if (!evalrecord) {
    return [];
  }

  // 如果输入是字符串，尝试解析为JSON对象
  let evalrecordObj = evalrecord;
  if (typeof evalrecord === 'string') {
    try {
      evalrecordObj = JSON.parse(evalrecord);
    } catch (error) {
      console.error('解析evalrecord失败:', error);
      return [];
    }
  }

  // 检查解析后的对象是否有效
  if (typeof evalrecordObj !== 'object' || evalrecordObj === null) {
    return [];
  }

  // 处理数组情况（如果evalrecord是数组）
  if (Array.isArray(evalrecordObj)) {
    return evalrecordObj.flatMap(item => getEvalrecordArray(item));
  }

  // 将对象转换为数组，保持原始属性名称
  return Object.entries(evalrecordObj).map(([key, value]) => ({
    prop: key,
    // 保持原始属性名称，不进行强制映射
    displayName: key,
    value: value
  }));
}


const emit = defineEmits(['update:selectedItems']);
// 存储当前卡片中选中的项目
const selectedItems = ref({});
// 处理复选框变化事件
const handleCheckboxChange = (item) => {
  
  if(item.flag){
      // 更新store中的对应记录
  const index = recordStore.records.findIndex(record => record.RECORD_ID === item.RECORD_ID);
  if (index !== -1) {
    // 使用Vue.set或直接赋值更新store中的数据
    recordStore.records[index].flag = item.flag;
  }
    // 添加或移除选中项目
  selectedItems.value = item;
  
  // 向父组件发送更新后的选中列表
  emit('update:selectedItems', selectedItems.value, 'add');
  }else{
    // 移除选中列表
    selectedItems.value = item
     // 向父组件发送更新后的选中列表
   emit('update:selectedItems', selectedItems.value, 'remove');
  }

};


// 智能解析EVALRECORD不同结构的辅助函数
const getEvalrecordValue = (item, valueType) => {
  try {
    // 检查item和EVALRECORD是否存在
    if (!item || !item.EVALRECORD) {
      return '';
    }
    
    // 解析JSON字符串
    let evalData = {};
    if (typeof item.EVALRECORD === 'string') {
      evalData = JSON.parse(item.EVALRECORD);
    } else if (typeof item.EVALRECORD === 'object') {
      evalData = item.EVALRECORD;
    }
    
    // 根据不同的值类型返回相应的属性值
    switch (valueType) {
      case 'title':
        return evalData.标题 || evalData.荣誉名称 || evalData.活动名称 || '';
      case 'location':
        return evalData.活动地点 || evalData.奖励级别 || '';
      case 'content':
        return evalData.内容 || evalData.奖励原因 || evalData.活动内容 || '';
      case 'level':
        return evalData.奖励级别 || evalData.活动地点 || '';
      default:
        return '';
    }
  } catch (error) {
    console.error('解析EVALRECORD失败:', error);
    return '';
  }
};
</script>

<style scoped lang="scss">
.card-module {
    width: 100%;
    height: 100%;
    margin: 20px 0;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);

    ::v-deep .el-card__body {
        padding: 0;
    }

    .card-module-header {
        display: flex;
        flex-direction: column;
        padding: 0px 20px;

        .card-module-count {
            font-size: 14px;
            color: #838993;
            margin: 10px 0 0px 0;
        }
    }

    .card-module-list {
        padding: 0px;

        .card-module-item {
            display: flex;
            align-items: flex-start;
            padding: 10px 0;
            border-bottom: 2px solid #f7f7f8;
            padding: var(--el-card-padding);


            .card-module-checkbox {
                margin-top: -8px;
                margin-right: 12px;
            }

            .card-module-text {
                margin: 5px 0 10px 0;
                color: #838993;
            }

            .card-module-content {
                flex: 1;

                .card-module-title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 14px;
                    color: #303133;
                    margin-bottom: 4px;

                    .card-module-tag {
                        font-size: 12px;
                        color: #fff;
                        padding: 4px;
                        border-radius: 4px;
                        margin-right: 10px;
                        background-color: #6d9bfe;

                        .el-icon {
                            font-size: 12px;
                            margin-right: 4px;
                        }
                    }

                }

                .card-module-footer {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .card-module-deadline {
                        margin-right: 10px;
                        font-size: 12px;
                        color: #909319;

                        .el-icon {
                            font-size: 12px;
                            margin-right: 4px;
                        }

                        &:last-child {
                            margin-right: 0;
                        }
                    }

                }
            }
        }

        .card-module-item:hover {
            background-color: #f7f7f8;
        }
    }
}

/* 手机屏幕 (<= 768px) */
@media (max-width: 768px) {
    .card-module {
        .card-module-header {
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .card-module-list {
            padding: 0;
        }
    }

}
</style>
